<template>
    <div class="bar-left-container">
        <div class="progress-item" v-for="(item, index) in porps.progressData" :key="index" :class="{'progress-item-divider': item.isShowDivider}">
            <div class="progress-item-content" v-if="!item.isShowDivider">
                <div class="progress-label">
                    <span class="label-text">{{ item?.name }}</span>
                    <!-- <span class="label-value">{{ item?.value }}%</span> -->
                </div>
                <div style="flex: 1;height: 100%;display: flex;" v-if="item?.type === 1">
                    <div style="position: relative;width: 100%;height: 100%;">
                        <div style="position: absolute;top: 0;left: 0;width: calc(100%);height: 100%;z-index: 9;" >
                            <el-progress :percentage="(item?.value / item?.valueB) * 100" :color="item?.color" :stroke-width="8" stroke-linecap="square" :show-text="true" :text-inside="true" style="width: 100%;height: 100%;">
                                <span>{{item?.value}} {{ item?.unit }}</span>
                            </el-progress>
                        </div>
                        <div style="height: 100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;">
                            <el-progress :percentage="100" color="rgba(47, 83, 138, 0.6)" :stroke-width="8" stroke-linecap="square" :show-text="false" :text-inside="false" style="width: calc(100%);height: 100%;"/>
                            <!-- <span style="position: absolute;top: 0;right: 0;z-index: 99;">{{ item?.valueB }}</span> -->
                        </div>
                        
                    </div>
                    
                    <!-- <span>123456</span> -->
                </div>
                <div v-else style="flex: 1;height: 100%;">
                    <el-progress :percentage="item?.value" :color="item?.color" :stroke-width="8" stroke-linecap="square" :show-text="true" style="height: 100%;width: 100%;" :text-inside="true" class="normal">
                        <span>{{ index == porps.progressData.length - 1 ? item?.value + '%' : item?.value }}</span>

                    </el-progress>
                </div>
            </div>
            <div class="progress-divider" v-if="item.isShowDivider == true">
                <el-divider border-style="dashed" />
            </div>
            
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
const porps = defineProps({
    progressData: {
        type: Array<any>,
        default: () => []
    },
    showDivider: {
        type: Boolean,
        default: false
    }
})
// 进度条数据

</script>

<style lang="less" scoped>
.bar-left-container {
    padding: 10px 20px 10px 20px;
    // background: rgba(0, 20, 40, 0.8);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: 15px 0;
    //   border: 1px solid rgba(31, 99, 163, 0.3);
}

.progress-item {
    //   margin-bottom: 24px;
    width: 100%;
    .progress-item-content {
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center;
    }
    // &:last-child {
    //     margin-bottom: 0;
    // }
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //   margin-bottom: 8px;
    width: 6em;
    .label-text {
        color: #7EB7FD;
        font-size: 14px;
        font-weight: 500;
    }

    .label-value {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
    }
}

:deep(.el-progress-bar) {
    height: 100%;
}

:deep(.el-progress-bar__outer) {
    // background-color: rgba(31, 99, 163, 0.2);
    background-color: rgba(47, 83, 138, 0);
    border-radius: 0;
    height: 100% !important;
}

:deep(.el-progress-bar__inner) {
    border-radius: 0;
    transition: width 0.6s ease;
}

:deep(.normal){
    width: 100%;
    .el-progress-bar__outer {
        background-color: rgba(31, 99, 163, 0.2) !important;
        // background-color: rgba(47, 83, 138, 0) !important;
        border-radius: 0;
        height: 100% !important;
    }
}

.progress-divider {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    :deep(.el-divider--horizontal) {
        margin: 0 !important;
    }
}
.progress-item-divider{
    width: 100%;
    height: 5px !important;
    display: flex;
    align-items: center;
}
</style>